Grid

Grid

Sections

    Overview of CSS Classes

    Selector.slds-grid
    Summary

    Initializes grid

    Restrict*
    ModifierTrue
    Selector.slds-grid_frame
    Summary

    Initializes grid

    Restrict*
    ModifierTrue
    Selector.slds-grid_vertical
    Summary

    Initializes grid

    Restrict*
    ModifierTrue
    Selector.slds-grid_vertical-reverse
    Summary

    Initializes grid

    Restrict*
    ModifierTrue
    Selector.slds-grid_reverse
    Summary

    Initializes grid

    Restrict*
    ModifierTrue
    Selector.slds-wrap
    Summary

    Allows columns to wrap when they exceed 100% of their parent’s width

    Restrict*
    ModifierTrue
    Selector.slds-nowrap
    Summary

    Keeps columns on one line. Allows columns to stretch and fill 100% of the parent’s width and height.

    Restrict*
    ModifierTrue
    Selector.slds-gutters
    Summary

    Apply 12px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-gutters_xxx-small
    Summary

    Apply 2px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-gutters_xx-small
    Summary

    Apply 4px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-gutters_x-small
    Summary

    Apply 8px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-gutters_small
    Summary

    Apply 12px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-gutters_medium
    Summary

    Apply 16px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-gutters_large
    Summary

    Apply 24px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-gutters_x-large
    Summary

    Apply 48px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-gutters_xx-large
    Summary

    Apply 32px gutters to each grid column when you add this class to an slds-grid element

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded
    Summary

    Normalizes the 0.75rem of padding when nesting a grid in a region with .slds-p-horizontal_small

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded-xxx-small
    Summary

    Normalizes the 0.125rem of padding when nesting a grid in a region with .slds-p-horizontal_xxx-small

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded-xx-small
    Summary

    Normalizes the 0.25rem of padding when nesting a grid in a region with .slds-p-horizontal_xx-small

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded-x-small
    Summary

    Normalizes the 0.5rem of padding when nesting a grid in a region with .slds-p-horizontal_x-small

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded-small
    Summary

    Normalizes the 0.75rem of padding when nesting a grid in a region with .slds-p-horizontal_small

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded-medium
    Summary

    Normalizes the 1rem of padding when nesting a grid in a region with .slds-p-horizontal_medium

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded-large
    Summary

    Normalizes the 1.5rem of padding when nesting a grid in a region with .slds-p-horizontal_large

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded-x-large
    Summary

    Normalizes the 1.5rem of padding when nesting a grid in a region with .slds-p-horizontal_x-large

    Restrict*
    ModifierTrue
    Selector.slds-grid_pull-padded-xx-large
    Summary

    Normalizes the 1.5rem of padding when nesting a grid in a region with .slds-p-horizontal_xx-large

    Restrict*
    ModifierTrue
    Selector.slds-col
    Summary

    Initializes a grid column

    Restrict*
    ModifierTrue
    Selector.slds-has-flexi-truncate
    Summary

    Needed when truncation is nested in a flexible container in a grid

    Restrict*
    ModifierTrue
    Selector.slds-no-flex
    Summary

    Removes flexbox from grid column

    Restrict*
    ModifierTrue
    Selector.slds-no-space
    Summary

    Sets the column to a min-width of 0

    Restrict*
    ModifierTrue
    Selector.slds-grow
    Summary

    Allows column to grow to children’s content

    Restrict*
    ModifierTrue
    Selector.slds-grow-none
    Summary

    Prevents column from growing to children’s content

    Restrict*
    ModifierTrue
    Selector.slds-shrink
    Summary

    Allows column to shrink to children's content

    Restrict*
    ModifierTrue
    Selector.slds-shrink-none
    Summary

    Prevents column from shrinking to children's content

    Restrict*
    ModifierTrue
    Selector.slds-grid_align-center
    Summary

    Columns align in the center to the main axis and expand in each direction

    Restrict*
    ModifierTrue
    Selector.slds-grid_align-space
    Summary

    Columns are evenly distributed with equal space around them all

    Restrict*
    ModifierTrue
    Selector.slds-grid_align-spread
    Summary

    Columns align to the left and right followed by center. Space is equal between them

    Restrict*
    ModifierTrue
    Selector.slds-grid_align-end
    Summary

    Columns start on the opposite end of the grid's main axis

    Restrict*
    ModifierTrue
    Selector.slds-grid_vertical-align-start
    Summary

    Columns start at the beginning of the grid's cross axis

    Restrict*
    ModifierTrue
    Selector.slds-grid_vertical-align-center
    Summary

    Columns align in the center to the cross axis and expand it each direction

    Restrict*
    ModifierTrue
    Selector.slds-grid_vertical-align-end
    Summary

    Columns start on the opposite end of the grid's cross axis

    Restrict*
    ModifierTrue
    Selector.slds-grid_vertical-stretch
    Summary

    Stretch the grid items for both single row and multi-line rows to fill the height of the parent grid container

    Restrict*
    ModifierTrue
    Selector.slds-container_small
    Summary

    Restrict width of containers to a maximum of 480px

    Restrict*
    ModifierTrue
    Selector.slds-container_medium
    Summary

    Restrict width of containers to a maximum of 768px

    Restrict*
    ModifierTrue
    Selector.slds-container_large
    Summary

    Restrict width of containers to a maximum of 1024px

    Restrict*
    ModifierTrue
    Selector.slds-container_x-large
    Summary

    Restrict width of containers to a maximum of 1280px

    Restrict*
    ModifierTrue
    Selector.slds-container_fluid
    Summary

    Width of container takes up 100% of viewport

    Restrict*
    ModifierTrue
    Selector.slds-container_center
    Summary

    Horizontally positions containers in the center of the viewport

    Restrict*
    ModifierTrue
    Selector.slds-container_left
    Summary

    Horizontally positions containers to the left of the viewport

    Restrict*
    ModifierTrue
    Selector.slds-container_right
    Summary

    Horizontally positions containers to the right of the viewport

    Restrict*
    ModifierTrue